/*******************************************************************************
 * Colors
 */

@use "sass:color";

// Brand colors
$oxford-blue: #002147;
$vermillion: #ce261e;
$amber: #f7c020;

// Blue shades
$blue-100: #002147;
$blue-95: #112e4f;
$blue-90: #1d3d63;
$blue-60: #577291;
$blue-65: #46688f;
$blue-50: #6e87a2;
$blue-40: #98a9bd;
$blue-30: #a4b6ca;
$blue-20: #dbe5f0;
$blue-10: #ebeef2;
$blue-5: #f0f4fa;

// Gray shades
$gray-100: #2d2e2d;
$gray-90: #4e4e4e;
$gray-80: #5b5b5b;
$gray-70: #858585;
$gray-60: #a1a1a1;
$gray-50: #c6c6c6;
$gray-30: #dadada;
$gray-20: #e7e7e7;
$gray-10: #f2f2f2;
$gray-5: #f7f7f7;

// Amber shades
$amber-110: #f9cf44;
$amber-10: #f4eddb;

$beige: #fbf9f3;
$white: #ffffff;

// Accent colors
$accent-electric-blue: #2162e6;
$accent-pale-blue: #e7f2ff;
$accent-vermillion: #b40000;

// Visited
$purple-90: #631d49;
$purple-60: #91577c;
$visited-light: #b398a9;

/* Text colors */
$tertiary-text-color: $amber;
$grey-text-color: #616161;
$text-color: $blue-90;
$secondary-text-color: $blue-60;
$bluish-grey-text-color: $blue-50;
$error-text-color: $vermillion;

/* Category colors */
$population-color: #2082a2;
$health-color: #bf1b1b;
$food-color: #588a0f;
$energy-color: #ca6f34;
$environment-color: #0c6947;
$technology-color: #2774c6;
$growth-inequality-color: #009655;
$work-life-color: #ab348a;
$public-sector-color: #eb6400;
$global-connections-color: #17393d;
$war-peace-color: #660000;
$politics-color: #1b0655;
$violence-rights-color: #cc235c;
$education-color: #253f77;
$media-color: #0089be;
$culture-color: #af488f;

/* Controls color */
$controls-color: #0073e6;
$light-shadow:
    rgba(0, 0, 0, 0.1) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.08) 0px 2px 2px;

/* SDG colors */
$sdgColors: (
    1: color.scale(#e5243b, $lightness: -15%),
    2: #dda63a,
    3: color.scale(#4c9f38, $lightness: -17%),
    4: color.scale(#c5192d, $lightness: -15%),
    5: color.scale(#ff3a21, $lightness: -19%),
    6: #26bde2,
    7: #fcc30b,
    8: color.scale(#a21942, $lightness: -15%),
    9: #fd6925,
    10: color.scale(#dd1367, $lightness: -15%),
    11: #fd9d24,
    12: #bf8b2e,
    13: color.scale(#3f7e44, $lightness: -15%),
    14: color.scale(#0a97d9, $lightness: -20%),
    15: #56c02b,
    16: color.scale(#00689d, $lightness: -15%),
    17: color.scale(#19486a, $lightness: -15%),
);

:root {
    // See also owidTypes.ts > OwidGdocPostContent > cover-color
    --amber: #{$amber};
    @each $i, $sdgColor in $sdgColors {
        --sdg-color-#{$i}: #{$sdgColor};
    }
}
